<template>
    <div id="likeCar">
  <section id="likeCar-info">
      <magic-header v-if="!isWxPublic && $.isApp" :isArticle="true" v-on:shareArt="shareArt" titleName="爱车频道"></magic-header>
      <section>
        <h3>{{data.title}}</h3>
        <div class="msg">
          <div class="left">
            <img :src="Logo" alt="">
          </div>
          <div class="middle">
            <div>{{data.author}}</div>
            <div>{{data.publishDate.substring(0,10)}}</div>
          </div>
          <!-- <div class="right" v-if="$.isApp">
            <div @click="attention" v-if="data.shop.follow === '0'">关注</div>
            <div @click="attention" v-if="data.shop.follow === '' ">关注</div>
            <div @click="cancelAttention" v-if="data.shop.follow === '1'">取消关注</div>
          </div> -->
        </div>
            <div class="content" v-html="data.content"></div>
        </section>
  </section>
    </div>
</template>
<script>
import magicHeader from "components/magicHeader";
import articleServices from "services/dynamicService/article";
import attentionServices from "services/dynamicService/attendion";
import cancelAttentionServices from "services/dynamicService/cancelAttendion";
import Logo from "assets/pic_onemore.png";
export default {
  components: {
    magicHeader
  },
  data() {
    return {
      data: "",
      Logo: Logo,
      isWxPublic: false
    };
  },
  created() {
    // env
    if(this.$.env==="wxPublic" || this.$.env==="webOrWechat"){
      this.isWxPublic = true
    }

    this.title = this.$route.query.title;
    let vm = this
    articleServices.bind(vm)(
      {
        id: vm.$route.query.id
      },
      res => {
        console.log(res);
        vm.data = res;
        vm.data.content = vm.data.content
          .split('src="/upload')
          .join('src="' + vm.$.host + "/upload");
        if (res.logo) {
          vm.Logo = vm.addPath(res.logo);
        } else {
          vm.Logo = Logo;
        }
        vm.url = vm.addPath(res.path);
      },
      err => {}
    );
  },
  methods: {
    attention() {
      if (!this.$.userId) {
        this.$.goLogin({
          name: "login"
        });
      }
      attentionServices.bind(this)(
        {
          type: "store",
          refId: this.data.shop.id
        },
        res => {
          if (res) {
            this.$.toast("关注成功");
            this.data.shop.follow = "1";
          } else {
            this.$.toast("关注失败");
          }
        },
        err => {
          this.$.toast("关注失败");
        }
      );
    },
    shareArt() {
      let shareThumImage = "/upload/image/default_user_icon.png"
      this.$.push(
        "route_share",
        {
          shareTitle: this.data.title,
          shareContent: '摘要',
          shareThumImage: shareThumImage,
          shareType: "1",
          needOAuth: "0",
          shareUrl: this.$.host + "/like_car?id=" + this.data.id,
          shareId: this.data.id
        },
        resp => {
          console.log(resp);
        }
      );
    },
    cancelAttention() {
      cancelAttentionServices.bind(this)(
        {
          type: "store",
          refId: this.data.shop.id
        },
        res => {
          if (res) {
            this.$.toast("取消关注成功");
            this.data.shop.follow = "0";
          } else {
            this.$.toast("取消关注失败");
          }
        },
        err => {
          this.$.toast("取消关注失败");
        }
      );
    }
  }
};
</script>
<style lang="scss">
#likeCar {
  h3 {
    text-align: center;
    padding: 20px 0;
  }
  .content {
    padding: 5px 10px;
    img {
      width: calc(100vw - 20px);
    }
  }
  .msg {
    display: flex;
    padding: 10px;
    .left {
      flex: 0 0 50px;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .middle {
      flex: 1;
      div {
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
      }
    }
    .right {
      color: #f98700;
      flex: 0 0 50px;
      text-align: center;
      line-height: 50px;
    }
  }
}
</style>
